<template>
  <div style="width: 100%;">
    <vue-office-docx
      v-if="fileType === 'docx'"
      class="vue-office1"
      :src="fileSrc"
    />
    <!-- <vue-office-pdf
      v-else-if="fileType === 'pdf'"
      class="vue-office1"
      :src="fileSrc"
      @rendered="renderedHandler"
      @error="errorHandler"
    /> -->
    <div v-else-if="fileType === 'pdf' && docBlocksType == 'DJ'" class="box-height">
      <iframe
        :src="'/pdfJS/web/viewer.html?file=' + fileSrc"
        width="70%"
        height="100%"
        id="myIframe"
      ></iframe>
      <div style="width: 30%; padding: 10px;" class="iframe-height">
        <el-collapse
          v-model="activeName"
          accordion
          v-for="(item, index) in docBlocksList"
          :key="index"
          @change="collapseChange"
        >
          <el-collapse-item :title="item.chunkText" :name="index">
            <div>{{ item.chunkText }}</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div v-else-if="fileType === 'pdf'&& docBlocksType == 'RAG'" class="box-height">
      <iframe
        :src="`/pdfJS/web/viewer.html?file=${fileSrc}&keyword=${docWord}` "
        width="70%"
        height="100%"
        id="pdf-view-iframe"
      ></iframe>
      <div style="width: 30%; padding: 10px;overflow-y: auto;">
        <el-collapse
          v-model="activeName"
          accordion
          v-for="(item, index) in docBlocksList"
          :key="index"
          @change="RagChange(item)"
        >
          <el-collapse-item :title="item.content" :name="index">
            <div>{{ item.content }}</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div v-else-if="fileType === 'pdf'&& docBlocksType == 'chunkRAG'" class="box-height">
      <iframe
        :src="`/pdfJS/web/viewer.html?file=${fileSrc}&keyword=${docWord}` "
        width="100%"
        height="100%"
        id="pdf-view-iframe"
      ></iframe>
    </div>
    <!-- <Preview v-else-if="fileType === 'pdf'" class="vue-office1" :fileSrc="fileSrc"  /> -->

    <!-- <div v-else>不支持的文件类型</div> -->
  </div>
</template>

<script>
import VueOfficeDocx from "@vue-office/docx";
import VueOfficePdf from "@vue-office/pdf";
// import Preview from '@/components/Preview/index.vue'; 
import "@vue-office/docx/lib/index.css"; // 引入样式

export default {
  name: "FileViewDrawer",
  components: { VueOfficeDocx, VueOfficePdf },
  // components: { VueOfficeDocx, VueOfficePdf, Preview },
  props: {
    fileSrc: {
      type: String,
      default: "",
    },
    fileType: {
      type: String,
      default: "",
    },
    docBlocksType: {
      type: String,
      default: "RAG",
    },
    docBlocksList:{
      type: Array,
      default: [],
    },
    chunkText: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      activeName: '',
      docWord: this.chunkText,
    };
  },
  methods: {
    RagChange(val){
      // this.docWord = val.content.replace(/\s/g, "")
      this.docWord = val.content
    },
    collapseChange(value){
      this.block(value)

      this.activeName = value
    },
  },
};
</script>
<style scoped lang="scss">
.vue-office1 {
  height: calc(100vh - 84px);
}
.iframe-height{
  height: 100%;
  overflow-y:scroll;
}
::v-deep .el-collapse-item__header {
  display: inline-block;
  white-space: nowrap; 
  width: 100%; 
  overflow: hidden;
  text-overflow:ellipsis;
}
</style>